<template>
  <view class="container">
    <view class="search-box">
      <input
        focus
        type="text"
        class="iconfont search-text"
        placeholder-class="iconfont icon-search"
        placeholder=" 搜索任务名称"
        v-model="searchText"
        @input="inputChange"
      />

      <!-- 任务列表 -->
      <view class="task-box">
        <view
          class="task-item"
          v-for="item in searchList"
          :key="item.uuid"
          @click.stop="checkTask(item.uuid)"
        >
          <!-- 任务名称 -->
          <view class="item-center">
            <text>{{ item.w_name }}</text>
            <text>{{ item.w_label }}</text>
          </view>
          <!-- 任务时间 -->
          <view class="item-right">
            <text class="task-time">
              {{ item.w_remind | formatDate("MM-dd hh:mm") }}
            </text>
          </view>
        </view>
      </view>

      <view v-if="isOpenbgImg" class="bg-box">
        <image
          v-show="searchList.length <= 0"
          src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9d57514b-4404-46e1-9760-8991b85dbc25/7aa88c00-3587-4887-84f0-38d0d7dc3afc.png"
          mode="widthFix"
        />
        <!-- <view>你还没有任务，快去添加吧！</view> -->
      </view>
    </view>
  </view>
</template>

<script>
const { getWorkByWName } = require("../../api/home/search");
const { debounce } = require("../../utils/utils");

export default {
  name: "Search",
  props: {
    isOpenbgImg: {
      type: Boolean,
      default: true,
    },
  },
  components: {},
  data() {
    return {
      searchText: "",
      searchList: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    inputChange() {
      this.getWorkByWName();
    },
    // 搜索任务
    getWorkByWName: debounce(function () {
      let params = {
        code: uni.getStorageSync("openId"),
        w_name: this.searchText.trim(),
      };
      getWorkByWName(params).then(
        res => {
          this.searchList = res ? res : [];
          console.log(this.searchList);
        },
        err => {
          uni.showToast({ title: err, icon: "none" });
        }
      );
    }, 350),
    // 查看任务
    checkTask(uuid) {
      if (uuid == "") return;
      uni.navigateTo({
        url: "../addtask/addtask?uuid=" + uuid,
      });
    },
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #fff;

  // 搜索框
  .search-box {
    .search-text {
      width: 100%;
      height: 72rpx;
      padding-left: 20rpx;
      line-height: 72rpx;
      background-color: #f2f2f2;
      border-radius: 8rpx;
      // text-align: center;
    }

    .bg-box {
      width: 100%;
      padding: 60rpx;
      padding-bottom: 0;

      image {
        width: 100%;
      }

      & > view {
        margin-top: 30rpx;
        text-align: center;
        font-size: 28rpx;
        color: #999999;
      }
    }
  }

  // 任务列表
  .task-box {
    padding: 0 30rpx;

    .task-item {
      display: flex;
      position: relative;
      margin-bottom: 20rpx;
      padding: 30rpx 20rpx 30rpx 0;
      background-color: #fff;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 12rpx;
        height: 40rpx;
        background-color: #666ee8;
      }

      // .item-left {
      //   width: 10%;

      //   & > checkbox {
      //     position: absolute;
      //     top: 50%;
      //     left: 4%;
      //     transform: translateY(-50%);
      //   }
      // }

      .item-center {
        flex: 1;
        display: flex;
        padding: 0 20rpx;
        padding-left: 10rpx;
        flex-direction: column;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;

        & text:first-child {
          color: #333333;
        }

        & text:last-child {
          font-size: 24rpx;
          color: #cccccc;
        }
      }

      .item-right {
        width: 200rpx;
        position: relative;

        .task-time {
          position: absolute;
          top: 0;
          height: 48rpx;
          padding: 8rpx 20rpx;
          line-height: 32rpx;
          background-color: #f2f2f2;
          border-radius: 24rpx;
          text-align: center;
          font-size: 24rpx;
          color: #333333;
        }
      }
    }
  }
}
</style>
